<template>
	<view>
		<topic-info :info="info"></topic-info>
		<divider></divider>
		<!-- 广告推荐 -->
		<view class="p-2 flex align-center border-bottom" hover-class="bg-light" v-for="(item, index) in hotList"
			:key="index">
			<text class="iconfont icon-xihuan text-main"></text>
			<text class="font text-dark text-ellipsis">{{item.title}}</text>
		</view>
		<divider></divider>
		<!--Tab 默认  最新 -->
		<view class="flex align-center py-2">
			<view class="flex align-center justify-center flex-1 " v-for="(item, index) in tabBars"
				:key="index" :class="tabIndex === index ? 'text-main font-lg font-weight-bold' : 'font-md'" @click="changeTab(index)">
				{{item.name}}
			</view>
		</view>
		<!-- 列表 -->
		<template v-if="listData.length > 0">
			<block v-for="(item, index) in listData" :key="index">
				<common-list :item="item" :index="index"></common-list>
				<divider></divider>
			</block>
		</template>
		<template v-else>
			<no-thing></no-thing>
		</template>
		<!-- 上拉加载 -->
		<load-more :loadmore="loadtext"></load-more>
	</view>
</template>

<script>
	import topicInfo from '@/components/topic-detail/topic-info.vue';
	import commonList from '@/components/common/common-list.vue';
	import noThing from '@/components/common/no-thing.vue'
	import loadMore from '../../components/common/load-more.vue'
	const demo = [{
		username: '昵称',
		userpic: '/static/default.jpg',
		newstime: "2024-03-19 下午 05:00",
		isFollow: false, //是否关注
		title: '我是标题',
		titlepic: '/static/demo/datapic/11.jpg',
		support: {
			type: 'support',
			support_count: 1,
			unsupport_count: 2,
		},
		comment_count: 2,
		share_num: 2
	
	},
	{
		username: '昵称1',
		userpic: '/static/default.jpg',
		newstime: "2024-03-19 下午 05:00",
		isFollow: false, //是否关注
		title: '我是标题',
		titlepic: '',
		support: {
			type: 'unsupport',
			support_count: 1,
			unsupport_count: 2,
		},
		comment_count: 2,
		share_num: 2
	
	},
	{
		username: '昵称2',
		userpic: '/static/default.jpg',
		newstime: "2024-03-19 下午 05:00",
		isFollow: false, //是否关注
		title: '我是标题',
		titlepic: '',
		support: {
			type: '',
			support_count: 1,
			unsupport_count: 2,
		},
		comment_count: 2,
		share_num: 2
	
	}]
	export default {
		components: {
			topicInfo,
			commonList,
			noThing,
			loadMore
		},
		data() {
			return {
				info: {
					cover: '/static/demo/topicpic/1.jpeg',
					title: '话题名称哈哈哈',
					today_count: 10,
					news_count: 10,
					desc: '话题描述'
				},
				hotList: [{
						title: '【新人必读】uni-app实战第二季商城类项目开发'
					},
					{
						title: '【新人必读】uni-app实战第三季仿微信项目开发'
					}
				],
				tabIndex: 0,
				tabBars: [{
						name: '默认'
					},
					{
						name: '最新'
					}
				],
				// 默认列表
				list1: [],
				loadtext1: '上拉加载更多',
				// 最新列表
				list2: [],
				loadtext2: '上拉加载更多'
			}
		},
		computed: {
			//当前列表数据
			listData() {
				return this['list' + (this.tabIndex + 1)]
				// let list = this.tabIndex === 0 ? this.list1 : this.list2
				// return list
			},
			// 当前上拉加载
			loadtext() {
				return this['loadtext'+(this.tabIndex + 1)]
			}
		},
		onLoad(e) {
			if (e.detail) {
				let res = JSON.parse(e.detail)
				this.info = res
			}
			this.list1 = demo
		},
		// 触底事件
		onReachBottom() {
			this.loadmore()
			
		},
		methods: {
			//切换选项卡
			changeTab(e) {
				this.tabIndex = e
			},
			//上拉加载更多
			loadmore() {
				// 拿到当前的列表
				let index = this.tabIndex
				// 判断是否处于可加载状态
				if(this.loadtext !== '上拉加载更多') return;
				//设置上拉状态处于加载中...
				this['loadtext' + (index + 1)] = '加载中...'
				// 请求数据
				setTimeout(() => {
				this['list' + (index + 1)] = [...this['list' + (index + 1)], ...this['list' + (index + 1)]]
				this['loadtext' + (index + 1)] = '上拉加载更多'
				},2000)
			}
		
			
		}
	}
</script>

<style>

</style>